﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
<link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="Content/ui.textbox.css" type="text/css" rel="stylesheet"  media="all" />
<link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
<link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
<link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />

<script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>   
<script src="Scripts/jquery.form.js" type="text/javascript"></script>
<script src="Scripts/ui.textbox.js" type="text/javascript"></script>
<script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>

<!-- InstanceBeginEditable name="pageStyles" -->

	<link href="Content/fullcalendar.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #calendar
        {
            width: 900px;
            margin: 0 auto;
        }
        /*leaveInfolist 的 CSS*/
        .fc-shijia, .fc-agenda .fc-event-time, .fc-shijia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: blue;
            color: #fff;
        }
        .fc-nianjia, .fc-agenda .fc-event-time, .fc-nianjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #336600;
            color: #fff;
        }
        .fc-bingjia, .fc-agenda .fc-event-time, .fc-bingjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #669999;
            color: #fff;
        }
        .fc-chanjia, .fc-agenda .fc-event-time, .fc-chanjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #CC6699;
            color: #fff;
        }
        .fc-chuchai, .fc-agenda .fc-event-time, .fc-chuchai a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #00CC00;
            color: #fff;
        }
        .fc-tiaoxiu, .fc-agenda .fc-event-time, .fc-tiaoxiu a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #00CC99;
            color: #fff;
        }
        .fc-jianjia, .fc-agenda .fc-event-time, .fc-jianjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #996633;
            color: #fff;
        }
        .fc-hunjia, .fc-agenda .fc-event-time, .fc-hunjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #FF3333;
            color: #fff;
        }
        .fc-waichu, .fc-agenda .fc-event-time, .fc-waichu a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #663399;
            color: #fff;
        }
        .fc-qita, .fc-agenda .fc-event-time, .fc-qita a
        {
            border-style: solid;
            border-color: #36c;
            background-color: gray;
            color: #fff;
        }
        
    </style>
    <!-- InstanceEndEditable -->
    
<!-- InstanceBeginEditable name="pageScripts" -->
<script src="Scripts/fullcalendar.js" type="text/javascript"></script>
<script type="text/javascript">


    //************* URL常量



    var URL_ATTENDANCE_LEAVER_INFO_BY_ID = '/attendance/LeaveInfoById';

    var URL_PERSONAL_LEAVE_INFO_LIST = '/attendance/PersonalLeaveInfoListPerYear';

    var URL_SIMPLEUSERINFO_BY_DEPTID = '/core/GetUserInfoInDept'



    //************* 全局变量



    var g_Var = {

        'currentDate': new Date(),
        'isBinding': false,
        'dataStorage': [],
        'yearStorage': [],
        'currentUserId': null

    };



    //************* 常量定义



    var StaticResource = {

        NotAudited: '未审核'

        // todo:...

    };

    var memberSelector = null;

    var cssList = ['fc-shijia',
                   'fc-nianjia',
                   'fc-bingjia',
                   'fc-chanjia',
                   'fc-chuchai',
                   'fc-tiaoxiu',
                   'fc-jianjia',
                   'fc-hunjia',
                   'fc-waichu',
                   'fc-qita'
                  ];



    var convertor = {

        "id": function (item) {
            return item.Id;
        },

        "title": function (item) {
            var mark = '(' + StaticResource.NotAudited + ')';
            var LeaveTitle;

            if (item.IsAudited) {
                LeaveTitle = item.Title;
            } else {
                LeaveTitle = item.Title + mark;
            }

            return LeaveTitle;

        },

        "start": function (item) {
            var startTime = Date.fromEpoch(item.Start);
            return startTime;

        },

        "end": function (item) {
            var endTime = Date.fromEpoch(item.End);
            return endTime;

        },

        "allDay": function (item) {
            return item.IsAllDay;
        },

        "className": function (item) {
            switch (item.Title) {
                case '事假': return cssList[0];
                    break;
                case '年假': return cssList[1];
                    break;
                case '病假': return cssList[2];
                    break;

                case '产假': return cssList[3];

                    break;

                case '出差': return cssList[4];

                    break;

                case '调休': return cssList[5];

                    break;

                case '检假': return cssList[6];

                    break;

                case '婚假': return cssList[7];

                    break;

                case '外出': return cssList[8];

                    break;

                case '其他': return cssList[9];

                    break;

            }

        }

    };



    //************* Accessor访问器

    var EzAccessor = {};



    if (ezmock.IS_MOCKED) {



        var mok_leaveInfoList = { 'LeaveInfoList': [

				{ 'Id': '111',

				    'Title': '事假',

				    'Start': 1281400005,

				    'End': 1281450445,

				    'IsAudited': false,

				    'Description': 'fuck'

				},

				{ 'Id': '222',

				    'Title': '调休',

				    'Start': 1286200045,

				    'End': 1286212085,

				    'IsAudited': true,

				    'Description': 'fuck',

				    'IsAllDay': false

				},

                { 'Id': '333',

                    'Title': '婚假',

                    'Start': 1286269945,

                    'End': 1286269995,

                    'IsAudited': false,

                    'Description': 'fuck'

                },

				{ 'Id': '444',

				    'Title': '出差',

				    'Start': 1281013222,

				    'End': 1281017222,

				    'IsAudited': true,

				    'Description': 'fuck',

				    'IsAllDay': false

				},

				{ 'Id': '555',

				    'Title': '病假',

				    'Start': 1281159222,

				    'End': 1281169222,

				    'IsAudited': true,

				    'Description': 'fuck'

				},

                { 'Id': '666',

                    'Title': '产假',

                    'Start': 1281269945,

                    'End': 1281272845,

                    'IsAudited': true,

                    'Description': 'fuck'

                },

                { 'Id': '777',

                    'Title': '检假',

                    'Start': 1283013222,

                    'End': 1283013522,

                    'IsAudited': true,

                    'Description': 'fuck'

                },

                { 'Id': '888',

                    'Title': '外出',

                    'Start': 1282269945,

                    'End': 1282273945,

                    'IsAudited': true,

                    'Description': 'fuck'

                },

                { 'Id': '999',

                    'Title': '其他',

                    'Start': 1284299945,

                    'End': 1284378946,

                    'IsAudited': true,

                    'Description': 'fuck'

                },

                { 'Id': '000',

                    'Title': '年假',

                    'Start': 1281569945,

                    'End': 1281574945,

                    'IsAudited': true,

                    'Description': 'fuck'

                }

               ]

        };





        var mock_auditJson = { "Id": "480f8836-29a9-4ba6- bbe1-8a3e928fc5de", "LeaveTypeId": "c7615898-2739-4c33-a8dc- a1451537b170", "LeaveTypeName": "外出", "User": { "Id": "ce36c495-38cc-4b7e- 875e-364ff8e087b5", "Name": "卢春叶", "UserName": "lcy", "Dept": { "Id": "e8731583-3397-4f28-aa43-c006dbe750a2", "DeptName": "行政部", "GroupId": "c875149c-ee0c-48e2-bd2d- 39d870f49b67"} }, "CreateTime": 1238463000, "StartTime": 1238463000, "EndTime": 1238468400, "LeaveTypeName": "事假", "Description": " 小东门银行", "IsAudited": false, "AuditUser": "SB", "AuditNote": "fuckfuckfuckfuckfuckfuckfuckfuckfuckfuck", "AuditTime": "1282010290", "IsForWork": false, "IsAgreed": false };



        var mock_currentUser =

            {

                "Id": "33333",

                "Name": "李7",

                "UserName": "yuxin",

                "Dept":

                    {

                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",

                        "DeptName": "软件工程",

                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"

                    }



            };

        var mock_deptList = [

            {

                'Id': '111',

                'DeptName': '软件工程'

            },

            {

                'Id': '222',

                'DeptName': '策划'

            },

            {

                'Id': '333',

                'DeptName': '设计'

            }

            ];





            var mock_isHasPermisson = true;





            var mockEzAccessor = {

                'doShowLeaveInfo': function () {

                    showLeaveInfo(mock_auditJson);

                },



                'doUpdateLeaveInfoList': function () {

                    g_Var['leaveInfoListJson'] = mok_leaveInfoList.LeaveInfoList;



                    updateStorge();

                    bindLeaveInfoList();

                    ajustCalendarSize();

                },

                'getCurrentUser': function () {

                    return mock_currentUser;

                },

                'getDeptList': function () {

                    return mock_deptList;

                },

                'getCurrentTime': function () {

                    return new Date().toEpoch();

                },

                'getIsHasPermisson': function () {

                    return mock_isHasPermisson;

                },

            };





        EzAccessor = mockEzAccessor;

    } else {

        var realEzAccessor = {

            'doShowLeaveInfo': function (leaveId) {

                $(document).ajaxBusy('begin');

                $.getJSON(

                    URL_ATTENDANCE_LEAVER_INFO_BY_ID,

                    { 'leaveId': leaveId },

                    function (e) {

                        showLeaveInfo(e);

                        $(document).ajaxBusy('end');

                    }

                    );

            },



            'doUpdateLeaveInfoList': function (currentDate) {

                $(document).ajaxBusy('begin');

                //清空数据

                $('#calendar').fullCalendar('removeEvents');

                //下拉菜单dissable

                $('#cmbMemberList').attr("disabled", true);

                $('#cmbDepartmentList').attr("disabled", true);



                $.getJSON(

                    URL_PERSONAL_LEAVE_INFO_LIST,

                    { 'currentDate': currentDate, 'userId': g_Var['currentUserId'] },

                    function (e) {

                        g_Var['leaveInfoListJson'] = e;

                        updateStorge();

                        bindLeaveInfoList();

                        ajustCalendarSize();



                        //下拉菜单enabele

                        $('#cmbMemberList').attr("disabled", false);

                        $('#cmbDepartmentList').attr("disabled", false);



                        $(document).ajaxBusy('end');

                    }

                    );

            },

            'getCurrentUser': function () {

                //return <%= ViewData["CurrentUser"] %>;

            },

            'getDeptList': function () {

                //return <%= ViewData["CurrentDeptList"] %>;

            },

            'getCurrentTime': function () {

                //return <%= ViewData["CurrentTime"] %>;

            },

            'getIsHasPermisson': function () {

                //return <%= ViewData["IsHasPermisson"] %>;

            },

        };



        EzAccessor = realEzAccessor;

    }









    ///getChineseTime



    function getChineseTime(dateTimeEpoch) {

        var blank = ' ';

        var dateTime = Date.fromEpoch(dateTimeEpoch);

        var date = dateTime.toFullChineseDateFormat();

        var time = dateTime.toFullTimeFormat();

        var chineseTime = date + blank + time

        return chineseTime;

    }







    ///mouseClickEvent

    function mouseClickEventCallback(eventData) {

        var leaveId = eventData.id;

        EzAccessor.doShowLeaveInfo(leaveId);

    }



    ///viewChangedCallback

    function viewChangedCallback(view) {

        if (!g_Var['isBinding']) {

            var calendarDate = ($('#calendar').fullCalendar('getDate'));

            var calendarYear = calendarDate.getFullYear();

            var currentYear = g_Var['currentDate'].getFullYear();



            g_Var['currentDate'] = Date.fromEpoch(calendarDate.toEpoch());



            if (calendarYear != currentYear) {

                updateLeaveInfoList();

            }

        }

    }



    ///ajustCalendarSize

    function ajustCalendarSize() {

        var MAX_CALENDAR_WIDTH = 700;

        var targetWidth;

        var contentWidth = $('#content').width();



        if (contentWidth <= MAX_CALENDAR_WIDTH) {

            targetWidth = contentWidth - 10;

        } else {

            targetWidth = MAX_CALENDAR_WIDTH;

        }



        $('#calendar').width(targetWidth + 'px');

        $('#calendar').empty();



        bindLeaveInfoList();

    }









    ///bindLeaveInfoList

    function bindLeaveInfoList() {



        var leaveInfoList = g_Var['dataStorage'];

        g_Var['isBinding'] = true;



        var personalLeaveInfoList = DataConverterForfullcalendar.convertfullcalendar(leaveInfoList, convertor);

        var calendarYear;





        $('#calendar').fullCalendar({

            theme: true,

            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'month,agendaWeek'

            },

            editable: false,

            events: personalLeaveInfoList,

            eventClick: mouseClickEventCallback,

            viewDisplay: viewChangedCallback

        });



        $('#calendar').fullCalendar('gotoDate', g_Var['currentDate'].getFullYear(), g_Var['currentDate'].getMonth(), g_Var['currentDate'].getDate());



        g_Var['isBinding'] = false;

    }



    ///showLeaveInfo

    function showLeaveInfo(leaveInfo) {

        var leaveInfoContent = $("<div/>");



        //假期类别

        var leaveTypeName = leaveInfo.LeaveTypeName;



        //假期申请时间

        var createDateTime = getChineseTime(leaveInfo.CreateTime);



        //假期开始时间

        var startDateTime = getChineseTime(leaveInfo.StartTime);



        //假期结束时间

        var endDateTime = getChineseTime(leaveInfo.EndTime);



        //假期理由

        var description = leaveInfo.Description;



        //是否通过审核

        var isAudited = "";



        var replaceText = $('#popContent').html();

        replaceText = replaceText.replace("{LeaveTypeName}", leaveTypeName)

                                 .replace("{CreateTime}", createDateTime)

                                 .replace("{StarTime}", startDateTime)

                                 .replace("{EndTime}", endDateTime)

                                 .replace("{Info}", description);



        if (leaveInfo.IsAudited) {

            //审核人

            var auditUserName = leaveInfo.AuditUser['Name'];



            //审核时间

            var auditDateTime = getChineseTime(leaveInfo.AuditTime);



            //审核意见

            var auditNote = leaveInfo.AuditNote;



            replaceText = replaceText.replace("{AuditName}", auditUserName)

                                     .replace("{AuditTime}", auditDateTime)

                                     .replace("{AuditNote}", auditNote);

            

        } else {

            isAudited = StaticResource.NotAudited;

        }





        $(leaveInfoContent).html(replaceText);



        if (leaveInfo.IsAudited) {

            $('#pop_isAgreed', leaveInfoContent).show();

            $('#pop_isAudited', leaveInfoContent).hide();

        } else {

            $('#pop_isAudited', leaveInfoContent).show();

            $('#pop_isAgreed', leaveInfoContent).hide();

        }



        //popContent

        leaveInfoContent.contentsManager();



    }



    ///updateStorge 年份改变时，更新数据缓存

    function updateStorge() {



        for (var key in g_Var['leaveInfoListJson']) {

            g_Var['dataStorage'].push(g_Var['leaveInfoListJson'][key]);

        }



        g_Var['yearStorage'].push(g_Var['currentDate'].getFullYear());

    }



    ///updateLeaveInfoList 年份改变时，更新请假列表

    function updateLeaveInfoList() {

        var isIn = false;



        for (var i = 0; i < g_Var['yearStorage'].length; i++) {

            if (g_Var['yearStorage'][i] == g_Var['currentDate'].getFullYear()) {

                isIn = true;

                break;

            }

        }



        if (!isIn) {

            var date = g_Var['currentDate'].toEpoch();

            EzAccessor.doUpdateLeaveInfoList(date);

        }



    }





    ///updateTitleInfo

    function updateTitleInfo() {

        var currentMember = $('#memberSelector').memberSelector("getMember");

        var title = currentMember.Name + "的假期记录";



        $('#cmbleaveTitle').html(title);

    }





    function clearStorage() {

        g_Var['dataStorage'] = [];

        g_Var['yearStorage'] = [];

    }





    function memberChangedCallback() {

        updateTitleInfo();

        clearStorage();

        ///更新假期数据

        updateLeaveInfoList();

    }







    ///initPage

    function initPage() {

        $(document).ajaxBusy();

        EzTipsManager.addTipBox('#tip1', 'tipLeaveinfo');
        EzTipsManager.showTipBox('tipLeaveinfo');

        EzTipsManager.addTipBox('#tip3', 'tipUserinfo');
        EzTipsManager.addTipBox('#tip2', 'tipTimeinfo');
        
        EzTipsManager.showTipBox('tipUserinfo');

        var deptList = EzAccessor.getDeptList();
        var currentDate = EzAccessor.getCurrentTime();
        var currentUser = EzAccessor.getCurrentUser();
        var isHasPermisson = EzAccessor.getIsHasPermisson();



        g_Var['currentDate'] = Date.fromEpoch(currentDate);
        $('#memberSelector').memberSelector({

            //部门列表

            deptList: deptList,

            //当前用户JSON

            currentUser: currentUser,

            //selector 成员改变时的callback

            memberChanged: function (event, id) {

                g_Var['currentUserId'] = id;

                memberChangedCallback();



            }

        });



        if (!isHasPermisson) {

            $('#memberSelector').hide();



        }



    }



    function initPageEvent() {

        $('#surplusLeaveTime').click(function () {



            EzTipsManager.showTipBox('tipTimeinfo');



            var TimeInfo = "您剩余假期时间为10000000000000小时";



            $('#info').html(TimeInfo);





        });



        $(window).wresize(function () {

            ajustCalendarSize();



        });

    }





    $(function () {



        initPage();

        initPageEvent();



    });

</script>
<!-- InstanceEndEditable -->



<body>
<div id="root">
	<div id="headw">
    	<div id="head">
            <!-- InstanceBeginEditable name="pageHead" -->
			<p>
                早上好，杨裕欣(软件工程部)
		    </p>
            <div id="status-bar">
            <span><a href="#">设置</a></span>&nbsp;
            魏玛软件出品
            </div>
            <!-- InstanceEndEditable -->
        </div>
    </div>
    <div id="main">
    
    	<div id="contentw">
            <div id="content-page">
	            <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <span id="cmbleaveTitle"></span>
                        <div style="display: inline-block; float: right;">
                            <div id="memberSelector">
                            </div>
                        </div>
                    </div>
                    <div id="page-body">
                        <div id="calendar" style="width: 90%;">
                        </div>
                    </div>
                <!-- InstanceEndEditable -->
            </div>
            <div id="content-foot"><small>这个是内容下面的脚注</small></div>
        </div>        
        
        <div id="tipsw">
	        <!-- InstanceBeginEditable name="pageShortcut" -->
            <div id="shortcuts" class="box">
            	<a class="btn-shortcut" href="/attendance/applyLeave">申请假期</a>
            </div>
            <!-- InstanceEndEditable -->                       
            <div id="tips" class="box"></div>
        </div>
        <div class="clearfloat"></div>
    </div> 
</div>
	    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id='tip1' style="display: none;">
        <h1>
            假期小贴士:</h1>
        <p class="indent">
            在这里，您可以查看到自己所有的假期情况。</p>
        <table>
            <tr>
                <td>
                    <span style="display: block; background: blue; width: 30px; height: 20px"></span>
                </td>
                <td>
                    事假
                </td>
                <td>
                    <span style="display: block; background: #336600; width: 30px; height: 20px"></span>
                </td>
                <td>
                    年假
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #669999; width: 30px; height: 20px"></span>
                </td>
                <td>
                    病假
                </td>
                <td>
                    <span style="display: block; background: #CC6699; width: 30px; height: 20px"></span>
                </td>
                <td>
                    产假
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #00CC00; width: 30px; height: 20px"></span>
                </td>
                <td>
                    出差(外地)
                </td>
                <td>
                    <span style="display: block; background: #00CC99; width: 30px; height: 20px"></span>
                </td>
                <td>
                    调休
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #996633; width: 30px; height: 20px"></span>
                </td>
                <td>
                    体检
                </td>
                <td>
                    <span style="display: block; background: #FF3333; width: 30px; height: 20px"></span>
                </td>
                <td>
                    婚假
                </td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #663399; width: 30px; height: 20px"></span>
                </td>
                <td>
                    外出(本市)
                </td>
                <td>
                    <span style="display: block; background: gray; width: 30px; height: 20px"></span>
                </td>
                <td>
                    其它假
                </td>
            </tr>
        </table>
    </div>
    <div id='tip3' style="display: none;">
        <h1>
            提示：</h1>
        <span>您可以用鼠标点击色块，查看每次假期更多的详细信息！</span><br />
        <a id="surplusLeaveTime" class="highlight" href="#">查看我的剩余假期时间</a>
    </div>
    <div id='tip2' style="display: none;">
        <span id="info"></span>
    </div>
    <div id="popContent" style="display: none;">
        <span>假别：{LeaveTypeName}</span>
        <br />
        <span>申请时间 : {CreateTime}</span><br />
        <span>开始时间 : {StarTime}</span><br />
        <span>结束时间 : {EndTime}</span><br />
        <span>请假原因 : {Info}</span>
        <br />
        <hr />
        <div id="pop_isAudited" style="display: none;">
            <span>未审核</span>
        </div>
        <div id="pop_isAgreed" style="display: none;">
            <span>审核人 : {AuditName}</span><br />
            <span>审核时间 : {AuditTime}</span>
            <br />
            <span>审核意见 : {AuditNote}</span><br />
        </div>
    </div>
    <!-- InstanceEndEditable -->    
</body>
<!-- InstanceEnd --></html>
